<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/welcome' }">权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>模块管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row style="margin-bottom: 20px;">
				<el-col>
					<el-button type="primary" @click="showAddcatedialog">添加分类</el-button>
				</el-col>
			</el-row>
			<tree-table :data="molist" :columns="columns" :selection-type="false" :expand-type="false" border show-index
				style="margin-bottom: 20px;" index-text="#">
				<template slot="order" slot-scope="scope">
					<el-tag type="primary" v-if="scope.row.ParentId===0">一级</el-tag>
					<el-tag type="success" size="mini" v-else>二级</el-tag>
				</template>
				<!-- 操作 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="warning" icon="el-icon-edit" @click="showBox(scope.row)">编辑
					</el-button>
					<el-button type="danger" icon="el-icon-delete" @click="DELETE(scope.row.Id)">删除
					</el-button>
				</template>
			</tree-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				background :page-sizes="[5, 10, 15, 20]" :page-size="limit"
				layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</el-card>
		<el-dialog title="新增模块" :visible.sync="dialogFormVisible" @close="AClose">
			<el-form :model="addform" ref="addFormRef">
				<el-form-item label="模块名称" prop="Name" label-width="80px">
					<el-input v-model="addform.Name"></el-input>
				</el-form-item>
				<el-form-item label="父级模块" prop="ParentId" label-width="80px">
					<el-select v-model="addform.ParentId">
						<el-option label="--一级模块--" value="0"></el-option>
						<el-option v-for="item in typelist" :label="item.Name" :value="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="路径" prop="Path" label-width="80px">
					<el-input v-model="addform.Path"></el-input>
				</el-form-item>
				<el-form-item label="权重" prop="Weight" label-width="80px">
					<el-input v-model="addform.Weight"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-on:click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="SUREADD">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="编辑模块" :visible.sync="editdialogFormVisible">
			<el-form :model="editform" ref="editFormRef">
				<el-form-item label="模块名称" prop="Name" label-width="80px">
					<el-input v-model="editform.Name"></el-input>
				</el-form-item>
				<el-form-item label="父级模块" prop="ParentId" label-width="80px">
					<el-select v-model="editform.ParentId">
						<el-option label="--一级模块--" value="0"></el-option>
						<el-option v-for="item in typelist" :label="item.Name" :value="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="路径" prop="Path" label-width="80px">
					<el-input v-model="editform.Path"></el-input>
				</el-form-item>
				<el-form-item label="权重" prop="Weight" label-width="80px">
					<el-input v-model="editform.Weight"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-on:click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="SureEdit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				molist: [],
				page: 1,
				limit: 5,
				count: 0,
				columns: [{
						label: '模块名称',
						prop: 'Name'
					}, {
						label: '等级',
						prop: 'ParentId',
						type: 'template',
						template: 'order'
					}, {
						label: '路径',
						prop: 'Path'
					}, {
						label: '权重',
						prop: 'Weight'
					},
					{
						label: '操作',
						type: 'template',
						template: 'opt'
					}
				],
				addform: {
					Name: '',
					ParentId: '',
					Path: '',
					Weight: ''
				},
				dialogFormVisible: false,
				typelist: [],
				editdialogFormVisible: false,
				editform: {
					Name: '',
					ParentId: '',
					Path: '',
					Weight: ''
				}
			}
		},
		created() {
			this.GetMoList();
			this.GetTyPeList();
		},
		methods: {
			showAddcatedialog() {
				this.dialogFormVisible = true;
			},
			AClose() {
				this.$refs.addFormRef.resetFields();
			},
			SUREADD() {
				this.$refs.addFormRef.validate(vali => {
					if (!vali) return;
					let _this = this;
					this.$axios.post('/api/api/Modules/AddMo', _this.addform).then(function(res) {
						if (res.data.code == 0) {
							_this.dialogFormVisible = false;
							_this.GetMoList();
							_this.$message.success(res.data.msg);
						} else if (res.data.code == -2) {
							_this.$message.error(res.data.msg);
						} else {
							_this.$message.error(res.data.msg);
						}
					}).catch(function(err) {
						_this.$message.error(err.data.msg);
					})
				})
			},
			showBox(row) {
				console.log(row);
				this.editform = row;
				this.editdialogFormVisible = true
			},
			SureEdit() {
				this.$refs.editFormRef.validate(vali => {
					if (!vali) return;
					let _this = this;
					this.$axios.post('/api/api/Modules/EditMo', _this.editform).then(function(res) {
						if (res.data.code == 0) {
							_this.editdialogFormVisible = false;
							_this.GetMoList();
							_this.$message.success(res.data.msg);
						} else if (res.data.code == -2) {
							_this.$message.error(res.data.msg);
						} else {
							_this.$message.error(res.data.msg);
						}
					}).catch(function(err) {
						_this.$message.error(err.data.msg);
					})
				})
			},
			async DELETE(Id) {
				const delresult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消删除！')
				}
				let _this = this;
				_this.$axios.post('/api/api/Modules/DelMo', {
					Id: Id
				}).then(function(res) {
					if (res.data.code == 0) {
						_this.GetMoList();
						_this.$message.success(res.data.msg);
					} else if (res.data.code == -2) {
						_this.GetMoList();
						_this.$message.error(res.data.msg);
					} else {
						_this.$message.error(res.data.msg);
					}
				}).catch(function(err) {
					_this.$message.error(err);
				})
			
			},
			 GetTyPeList() {
				let _this = this;
				this.$axios.get('/api/api/Modules/GetTypeList').then(function(res) {
					console.log(res.data.data);
					_this.typelist = res.data.data;
				}).catch(function(err) {
					_this.$message.error("获取分类失败");
				})
			},
			GetMoList() {
				let _this = this;
				this.$axios.get('/api/api/Modules/GetMoList', {
					params: {
						page: _this.page,
						limit: _this.limit
					}
				}).then(function(res) {
					console.log(res);
					_this.molist = res.data.data;
					_this.count = res.data.count;
				}).catch(function(err) {
					console.log(err);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.limit = newSize;
				this.GetMoList();
			},
			//监听页码值改变
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.page = newPage;
				this.GetMoList();
			},
		}

	}
</script>

<style>

</style>
